<script>
import { getGoodsList } from '@/api/mall.js';
import Photography from '../detail/photography.vue'

export default {
  name: "photography",
  components: {
    Photography
  },
  props: {
    data: {
      default: () => ({})
    }
  },
  data() {
    return {
      isShowDown: true,
      dataList: [],
    }
  },
  computed: {
    // 处理标签列表
    tagList() {
      return this.data.Tags ? this.data.Tags.split(',').map(tag => tag.trim()) : [];
    }
  },
  created() {
    this.initGoods();
  },
  methods: {
    async initGoods() {
      const data = {
        BusinessId: this.data.Id,
        Index: 1,
        Size: 100,
        PurchaseMethod: '0,1'
      };
      try {
        const { Data } = await getGoodsList(data);
        this.dataList = Data;
      } catch (error) {
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },
    // 点击事件，向父组件传递数据
    handleClick() {
      this.$emit('click', this.data);
    },
    handleCheck() {
      this.$emit('handleCheck', this.data, this.isShowDown);
    },
    handleItem(Id) {
      const url = `/mall_subpages/goods/index?id=${Id}&type=6`;
      uni.navigateTo({ url });
    }
  }
}
</script>

<template>
<view class="page">
  <view class="photography-container" hover-class="photography-hover" @click="handleClick">
      <!-- 封面图片 -->
      <view class="photography-image">
        <image :src="data.ShopLogo" mode="aspectFill"></image>
        <view class="photography-tag" v-if="data.IsRecommend">{{ $t('merchant.common.recommended') }}</view>
      </view>

      <!-- 摄影商户信息 -->
      <view class="photography-info">
        <view class="photography-info-top">
          <view class="photography-name-wrap">
            <view class="photography-name">{{data.ShopName || $t('merchant.photography.studio')}}</view>
            <view v-if="dataList.length" class="photography-name-check" @click.stop="handleCheck">
              <uni-icons v-if="isShowDown" type="down" size="20" />
              <uni-icons v-else type="up" size="20" />
            </view>
          </view>
          <view class="photography-time">{{ $t('merchant.common.openingHours') }}：{{data.BusinessHours || '未设置营业时间'}}</view>
          <view class="photography-price-row">
            {{ $t('merchant.common.averageCost') }}：<text class="price">¥{{data.PerConsumption || 300}}</text><text class="price-unit">{{ $t('merchant.photography.pricePerPerson') }}</text>
          </view>
          <view class="photography-tags">
            <text class="tag" v-for="(tag, index) in tagList" :key="index">{{tag}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view v-if="!isShowDown" class="shop-list">
      <view v-for="item in dataList" :key="item.Id" class="list-item">
        <Photography :data="item" @click="handleItem" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(30rpx);
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: calc(0.1s * var(--item-index, 0));
}
.photography-container {
  overflow: hidden;
  display: flex;

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 摄影图片
  .photography-image {
    width: 180rpx;
    height: 180rpx;
    position: relative;
    flex-shrink: 0;
    margin-right: 24rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
      object-fit: cover;
    }

    .photography-tag {
      position: absolute;
      top: 12rpx;
      left: 12rpx;
      background: linear-gradient(135deg, #ff6b6b, #ff8787);
      color: #fff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
    }
  }

  // 摄影信息
  .photography-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 180rpx;
    // max-height: 180rpx;

    .photography-info-top {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .photography-name-wrap {
        display: flex;
        align-items: center;
        padding: 10rpx 0;
        overflow: hidden;

        .photography-name {
          flex: 1;
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
          margin-right: 12rpx;
          max-width: 100%;
          word-break: break-all;
          white-space: normal;
        }
        .photography-name-check {
          width: 42rpx;
          height: 42rpx;
        }
      }

      .photography-time {
        font-size: 22rpx;
        color: #666;
        padding: 6rpx 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .photography-price-row {
        font-size: 22rpx;
        color: #666;
        padding: 6rpx 0;

        .price {
          color: #ff6b6b;
          font-weight: 600;
        }

        .price-unit {
          font-size: 20rpx;
          color: #999;
        }
      }

      .photography-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;
        margin-top: 6rpx;

        .tag {
          display: inline-block;
          font-size: 20rpx;
          color: #9B5734;
          background-color: #FFF4E6;
          padding: 2rpx 10rpx;
          border-radius: 6rpx;
        }
      }
    }
  }
}
.shop-list {
  .list-item {
    margin-top: 20rpx;
  }
}
</style>
